'use client';
import Image from "next/image";
import {  useState } from 'react';
import { WalletConnectButton } from '../components/WalletConnectButton';
import { DepositForm } from '../components/DepositForm';
import { WithdrawForm } from '../components/WithdrawForm';
import { VaultStats } from '../components/VaultStats';
import { SimulateProfitButton } from '../components/SimulateProfitButton';
import { ApproveButton } from '../components/ApproveButton';
import { WagmiProvider } from 'wagmi';
import { config } from '@/lib/wagmiClient';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

export default function Home() {

  const [queryClient] = useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={config}>
        <main className="min-h-screen space-y-2 max-w-md justify-center mx-auto p-6">
        <div className="bg-white rounded-3xl shadow-xl p-10 w-full max-w-md space-y-2">
          <h1 className="text-3xl font-bold text-center text-gray-900">Mini DeFi Vault</h1>
          <WalletConnectButton />
          <VaultStats />
          <ApproveButton />
          <DepositForm />
          <WithdrawForm />
          <SimulateProfitButton />
          </div>
        </main>
      </WagmiProvider>
    </QueryClientProvider>
    
  );
}